<template>
	<view class="content">
      <view class="card-box card1">
          <view class="label">{{sublease.depreciation_rate}}</view>
          <image :src="sublease.pic" class="cover-img" />
          <view class="main-box" >
            <view class="title">{{sublease.type_name}}</view>
            <view class="periods">月数：{{ sublease.periods }}</view>
            <view class="money">每月金额：<text>{{sublease.per_price}}元</text></view>
          </view>
      </view>
      <view class="card-box card2">
        <view class="money-box">
          <view class="txt1">支付金额（元）</view>
          <view  class="txt2">{{sublease.periods_sum}}元</view>
        </view>
        <view class="status-box" :class="sublease.status == 0 ? 'watipay' : ''">
          <!-- {{statusObj[sublease.status]}} -->
          支付中
        </view>
      </view>
      <view class="periods-list">
          <view class="periods-item">
            <view class="hd">
              <view class="left">支付月数</view>
              <view class="right">{{ sublease.periods }}月</view>
            </view> 
            <view class="bd"  v-for="(item, index) in staging" :key="index">
                <view class="con1">
                  <view class="periods">{{item.periods_name}}</view>
                  <view class="money">{{item.periods_amount}}元</view>
                </view>
                <view class="con2">
                  <view class="periods-date">{{item.periods_date}}</view>
                  <view   :class="['status','status'+item.status]">{{statusObj[item.status]}}</view>
                </view>
            </view>
          </view>
      </view>
      <!-- stag_id：当前还款期数id，如果是0 则不显示还款按钮，因为还没到还款时间点或者已经都还完 -->
      <view class="operate-box" @tap="repaymentToPublic(sublease.stag_id)" v-if="sublease.stag_id != 0">对公支付</view>
	</view>
</template>

<script>
	import { carStaging } from '@/api/car.js';
  
	export default {
		components: {
			
		},
		data() {
			return {
				tagStyle: {
					img: 'width:100%;display:block;',
					table: 'width:100%',
					video: 'width:100%'
				},
				sublease: {},
        staging: [],
        id: "",
        type: "",
        statusObj: {
          0: '待支付租金' ,
          1: '待审核' ,
          2: '已付租金',
          3:'逾期租金 '
        }
			}
		},
		onLoad(options) {
      if(options.order_id){
        this.id = options.order_id
      }
      if (options.type) {
        this.type = options.type
      }
      console.log(options)
      if(options.title){
        uni.setNavigationBarTitle({
          title: options.title
        })
      }
      this.initData()
		},
    methods: {
      initData(){
        carStaging({
          id: this.id,
          type: this.type
        }).then(res => {
        	this.sublease = res.data.sublease;
          this.staging = res.data.staging;
        }).catch(err => {
        	that.$util.Tips({
        		title: err
        	});
        })
      },
      // 对公还款
      repaymentToPublic(orderId){
        let that = this;
        // 需要跳转上传付款凭证页面
        uni.redirectTo({
        	url:'/pages/hire_sub/sublease/pay?order_id=' + orderId,
          success(){
            
          },
          fail(){
           that.$util.Tips({
           	title: '敬请期待！'
           });
          }
        }) 
      }
    }
		
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #fff;
	}
  
  .periods-list{
    padding: 24rpx 30rpx;
    background: #FFF;
    border-radius: 16rpx;
    .periods-item{
      .hd{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .left{
          font-weight: 500;
          font-size: 28rpx;
          color: rgba(0,0,0,0.9);
        }
        .right{
          font-weight: 600;
          font-size: 28rpx;
          color: #008DFF;
        }
      }
      .bd{
        border-bottom: 1rpx solid #E7E7E7;
        padding: 24rpx 0;
        .con1{
          display: flex;
          align-items: center;
          justify-content: space-between;
          .periods{
            font-weight: 400;
            font-size: 28rpx;
            color: rgba(0,0,0,0.9);
          }
          .money{
            font-size: 28rpx;
            color: rgba(0,0,0,0.9);
          }
        }
        .con2{
          margin-top: 10rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .periods-date{
            font-size: 28rpx;
            color: rgba(0,0,0,0.4);
          }
          .status{
            font-size: 28rpx;
            color: rgba(0,0,0,0.9);
             color: #FF5700;
            &.status2{
              color: #36d536;
            }
           
          }
        }
      }
    }
  }

	.content {
		padding: 30rpx;
    .card-box{
      display: flex;
      align-items: center;
      position: relative;
      background: #FFFFFF;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      padding: 24rpx;
      margin-bottom: 24rpx;
      .label{
        position: absolute;
        left: 0;
        top: 0;
        background: #E5F3FF;
        font-weight: 500;
        font-size: 24rpx;
        color: #111E36;
        padding: 6rpx 12rpx;
        border-radius: 16rpx 4rpx 16rpx 2rpx;
      }
      .cover-img{
        width: 230rpx;
        height: 120rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        margin-right: 30rpx;
        border: 1rpx solid #E7E7E7;
      }
      .main-box{
        font-size: 28rpx;
        color: rgba(0,0,0,0.9);
        .title{
          font-weight: 600;
          font-size: 36rpx;
          color: rgba(0,0,0,0.9);
        }
        .periods{
          margin-top: 10rpx;
        }
        .money{
          margin-top: 10rpx;
          text{
            font-weight: bold;
            font-size: 28rpx;
            color: #FF5700;
          }
        }
      }
      &.card2{
        justify-content: space-between;
        .money-box{
          .txt1{
            font-size: 28rpx;
            color: rgba(0,0,0,0.9);
          }
          .txt2{
            font-weight: 600;
            font-size: 56rpx;
            color: rgba(0,0,0,0.9);
          }
        }
        .status-box{
          font-size: 32rpx;
          color: rgba(0,0,0,0.9);
          &.watipay{
              font-weight: 500;
               color: #FF5700;
          }
        }
      }
    }
	}
  
  .operate-box{
      width: 686rpx;
      height: 96rpx;
      line-height: 96rpx;
      margin: 40rpx auto 30rpx;
      box-sizing: border-box;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      font-weight: 600;
      font-size: 32rpx;
      color: #FFFFFF;
      background: #008DFF;
      text-align: center;
      border-radius: 12rpx;
  }
</style>
